@import '../var';
@import 'tippy.js/dist/tippy.css';

@mixin theme-data-placement($pos, $bg) {
  &[data-placement^='#{$pos}'] > .tippy-arrow:before {
    border-#{$pos}-color: $bg;
  }
}

@mixin theme($theme, $bg, $txt) {
  .tippy-box[data-theme~='#{$theme}'] {
    background-color: $bg;
    // font-weight: 600;
    color: $txt;
    box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25),
      0 4px 4px -2px rgba(91, 94, 105, 0.15);

    @include theme-data-placement(top, $bg);
    @include theme-data-placement(bottom, $bg);
    @include theme-data-placement(left, $bg);
    @include theme-data-placement(right, $bg);
    > .tippy-backdrop {
      background-color: $bg;
    }
    > .tippy-svg-arrow {
      fill: $bg;
    }
  }
}

// @include theme(light, $background, $text);
@each $name, $pair in $colors {
  $color: nth($pair, 1);
  $color-invert: nth($pair, 2);
  @include theme(#{$name}, $color, $color-invert);
}
// @include theme(primary, $primary, $primary-invert);
// @include theme(success, $success, $success-invert);
// @include theme(info, $info, $info-invert);
// @include theme(link, $link, $link-invert);
// @include theme(warning, $warning, $warning-invert);
// @include theme(danger, $danger, $danger-invert);

.tippy-box[data-theme~='light-border'] {
  background-color: $background;
  background-clip: padding-box;
  border: 1px solid $border;
  color: $text;
  box-shadow: 0 4px 14px -2px rgba(0, 8, 16, 0.08);
  // box-shadow: 0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);

  > .tippy-backdrop {
    background-color: $background;
  }
  > .tippy-arrow:after {
    content: '';
    position: absolute;
    z-index: -1;
    border-color: transparent;
    border-style: solid;
  }
  > .tippy-svg-arrow {
    fill: $background;
    &:after {
      // background-image:url();
      background-size: 16px 6px;
      width: 16px;
      height: 6px;
      content: '';
      position: absolute;
      z-index: -1;
    }
  }

  &[data-placement^='top'] {
    > .tippy-arrow:before {
      border-top-color: $background;
    }
    > .tippy-arrow:after {
      border-top-color: $border;
      border-width: 7px 7px 0;
      top: 17px;
      left: 1px;
    }
    > .tippy-svg-arrow {
      > svg {
        top: 16px;
      }
      &:after {
        top: 17px;
      }
    }
  }

  &[data-placement^='bottom'] {
    > .tippy-arrow:before {
      border-bottom-color: $background;
      bottom: 16px;
    }
    > .tippy-arrow:after {
      border-bottom-color: $border;
      border-width: 0 7px 7px;
      bottom: 17px;
      left: 1px;
    }
    > .tippy-svg-arrow {
      > svg {
        bottom: 16px;
      }
      &:after {
        bottom: 17px;
      }
    }
  }

  &[data-placement^='left'] {
    > .tippy-arrow:before {
      border-left-color: $background;
    }
    > .tippy-arrow:after {
      border-left-color: $border;
      border-width: 7px 0 7px 7px;
      left: 17px;
      top: 1px;
    }
    > .tippy-svg-arrow {
      > svg {
        left: 11px;
      }
      &:after {
        left: 12px;
      }
    }
  }

  &[data-placement^='right'] {
    > .tippy-arrow:before {
      border-right-color: $background;
      right: 16px;
    }
    > .tippy-arrow:after {
      border-right-color: $border;
      border-width: 7px 7px 7px 0;
      right: 17px;
      top: 1px;
    }
    > .tippy-svg-arrow {
      > svg {
        right: 11px;
      }
      &:after {
        right: 12px;
      }
    }
  }
}

// @mixin theme-x($name, $bg, $o, $txt) {
//   .tippy-box[data-theme~=#{$name}] {
//     background-color: rgba($bg, $o);
//     color: $txt;
//     >.tippy-arrow {
//       width: 14px;
//       height: 14px;
//     }

//     &[data-placement^=top]>.tippy-arrow:before {
//       border-width:7px 7px 0;
//       border-top-color: rgba($bg, $o);
//     }
//     &[data-placement^=bottom]>.tippy-arrow:before {
//       border-width:0 7px 7px;
//       border-bottom-color: rgba($bg, $o);
//     }
//     &[data-placement^=left]>.tippy-arrow:before {
//       border-width:7px 0 7px 7px;
//       border-left-color: rgba($bg, $o);
//     }
//     &[data-placement^=right]>.tippy-arrow:before {
//       border-width:7px 7px 7px 0;
//       border-right-color: rgba($bg, $o);
//     }
//     >.tippy-backdrop{
//       background-color:rgba($bg, $o);
//     }
//     >.tippy-svg-arrow {
//       fill:rgba($bg, $o);
//     }
//   }
// }

// @include theme-x(translucent, #000, 0.7, #fff);
